<template>
  <div>
    <i-vxe-table ref="iVxeTableRef" @vxeTableSearchFun="vxeTableSearchFun" :tableData="tableData" @printFun="printFun"
      @importFun="importFun" @exportFun="exportFun" @updateFun="updateFun" @deleteFun="deleteFun"
      @addAppFun="addAppFun">
      <template #status_template="{ obj }">
        <a-badge status="processing" :color="obj.status==='0'?'':'red'" />
        <span>{{obj.status==='0'?'启用':'禁用'}}</span>
      </template>
      <template #verify_template="{ obj }">
        <span>{{obj.verify==='0'?'验证':'不验证'}}</span>
      </template>
    </i-vxe-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IVxeTable } from 'wd-platform-library'
import {
    TableDataInterFace,
    PageInfoInterFace,
    ResultInterFace
} from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
interface AppResult {
  id: string;
  appDesc: string;
  appId: string;
  appName: string;
  appSecret: string;
  iconPath: string;
  status: string;
  verify: string;
}

export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const iVxeTableRef = ref()
        const dataList = [
            {
                id: '1085556743692288',
                appName: '系统管理',
                appId: 'auth',
                appSecret: 'auth',
                iconPath: 'iconcedaohang_quanxianguanli',
                verify: '1',
                status: '0',
                price: '55',
                time: '1638933537',
                appDesc:
          '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
                dr: '0'
            },
            {
                id: '1086054423068672',
                appName: '产品管理',
                appId: 'product',
                appSecret: 'product',
                iconPath: 'iconcedaohang_chanpinzhongxin',
                verify: '0',
                price: '55',
                time: '1638933537',
                status: '0',
                appDesc: '产品管理',
                dr: '0'
            },
            {
                id: '2106618124156928',
                appName: '营销获客',
                appId: 'channel',
                price: '55',
                time: '1638933537',
                appSecret: 'channel',
                iconPath: 'iconcedaohang_yingxiaohuoke',
                verify: '0',
                status: '1',
                appDesc: '文都营销获客',
                dr: '0'
            },
            {
                id: '8185375542173753',
                appName: '线上资源',
                appId: 'consult',
                price: '55',
                time: '1638933537',
                appSecret: 'consult',
                iconPath: 'iconcedaohang_zixungongju',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            },
            {
                id: '8185375542173755',
                appName: '订单管理',
                appId: 'order',
                appSecret: 'order',
                price: '55',
                time: '1638933537',
                iconPath: 'iconcedaohang_xuankezhongxin',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            },
            {
                id: '8185375542173761',
                appName: '数据统计',
                appId: 'statistics',
                time: '1638933537',
                price: '55',
                appSecret: 'statistics',
                iconPath: 'iconcedaohang_shujutongji',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            }
        ]
        const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'appName',
                        width: 150,
                        title: '应用名称',
                        fixed: 'left',
                        searchFilter: {
                            type: 'input',
                            placeholder: '请输入姓名'
                        }
                    },
                    {
                        field: 'appId',
                        width: 150,
                        title: '应用ID',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请输入应用名称',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: false
                        }
                    },
                    {
                        field: 'appSecret',
                        minWidth: 200,
                        title: 'appSecret',
                        searchFilter: {
                            type: 'select',
                            placeholder: '请选择姓名2',
                            list: [
                                { label: '前端开发', value: '前端' },
                                { label: '后端开发', value: '后端' },
                                { label: '测试', value: '测试' },
                                { label: '程序员鼓励师', value: '程序员鼓励师' }
                            ],
                            filterMultiple: true
                        }
                    },
                    {
                        field: 'iconPath',
                        minWidth: 200,
                        showOverflow: true,
                        title: '应用图标'
                    },
                    {
                        field: 'time',
                        minWidth: 200,
                        showOverflow: true,
                        format: 'time',
                        title: '时间'
                    },
                    {
                        field: 'price',
                        minWidth: 200,
                        showOverflow: true,
                        format: 'prick',
                        title: '金额'
                    },
                    {
                        field: 'status',
                        width: 80,
                        title: '状态',
                        slots: {
                            default: 'status_template'
                        }
                    },
                    {
                        field: 'verify',
                        width: 80,
                        title: '是否验证',
                        slots: {
                            default: 'verify_template'
                        }
                    },
                    {
                        field: 'appDesc',
                        minWidth: 200,
                        title: '应用描述'
                    }
                ], // 表头配置
                data: [] // 数据集合
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            },
            operation: {
                label: '操作',
                dataList: [
                    {
                        label: '编辑',
                        isShow: true,
                        buttonFun: 'updateFun',
                        width: 48
                    },
                    {
                        label: '删除',
                        isShow: true,
                        buttonFun: 'deleteFun',
                        width: 48,
                        remindData: {
                            isShow: true,
                            remindTitle: '是否删除',
                            remindContext: '删除后数据将无法恢复'
                        }
                    }
                ]
            },
            titleOperation: [
                {
                    label: '添加',
                    isShow: true,
                    buttonFun: 'addAppFun',
                    icon: '123'
                }
            ],
            authControl: {
                export: true, // 是否展示导出
                import: true, // 是否显示导入
                print: true, // 是否显示打印
                isCheckBox: true, // 是否显示复选框
                columnDrop: true, // 是否可以拖拽
                toolbarCustom: true, // 展示自定义
                isAutoSelect: true// 自动查询默认为true
            }
        })
        const vxeTableSearchFun = (field: string, value: any) => {
            console.log(field, field)
            alert('我筛选了' + field + ' 值: ' + value)
        }
        const updateFun = (data: any) => {
            alert('点击编辑' + JSON.stringify(data))
        }
        const addAppFun = (dataList: Array<any>) => {
            alert('点击添加' + dataList.length)
        }
        const deleteFun = () => {
            alert('点击删除')
        }
        const exportFun = (dataList: Array<any>) => {
            alert('点击导出' + dataList.length)
        }
        const importFun = (dataList: Array<any>) => {
            alert('点击导入' + dataList.length)
        }
        const printFun = (dataList: Array<any>) => {
            alert('点击打印' + dataList.length)
        }
        return {
            vxeTableSearchFun,
            printFun,
            importFun,
            exportFun,
            updateFun,
            addAppFun,
            deleteFun,
            tableData,
            iVxeTableRef
        }
    },
    components: {
        IVxeTable
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
